/*desktop*/
@media screen and (min-width: 1201px) {
    head {
    	padding-top: 5%;
    	font-family: verdana;
    	text-align: center;
    }
    h2 {
    	font-size: 36px;
    	padding-bottom: 32px;
    	padding-top: 24px;
    }
    body {
    	font-family: Source Code Pro;
    	text-align: center;
    	color: #0ED145;
    	background-color: #000000;
    }
    button {
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    	margin: 0px;
    	padding: 6px;
    	display: block;
    	height: 100%;
    	width: 100%;
    	color: #0ED145;
    	text-decoration: none;
    	background-color: black;
    	position: fixed;
    	/*animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; */
    }

    label {
        color: #0ED145;
    }
    iframe {
        width: 100%; 
        height: 100%;
        color: #0ED145;
        border:0;
    }
    button:hover {
      cursor: pointer;
      background-color:#0ED145;
      color: black;
      transition: 0.7s;
    }
    .faded {
        opacity: 0;
    }
    #logoContainer {
    	padding-top: 0%;
    	padding-bottom: 0;
    	height: 150px;
    	width: auto;
    }
    .logo {
    	height: 150px;
    	width: auto;
    	animation: logoIntro 2s 1;
    	transition: logoIntro 2s; 
    }
    .logo2 {
    	height: 150px;
    	width: auto;
    }
    @keyframes logoIntro {
    	0% {opacity: 0; height: 75vh; width: auto;}
    	25% {opacity: 1; height: 75vh; width: auto;}
    	100% {height: 150px; width: auto;}
    }
    .companyName {
        animation: sloganIntro 2s 1;
    	transition: sloganIntro 2s;
    }
    .companyName2 {
        /*animation: sloganIntro 2s 1;
    	transition: sloganIntro 2s; */
    }
    @keyframes sloganIntro {
    	0% {opacity: 0;}
    	75% {opacity: 0;}
    	100% {opacity: 1;}
    }
    #topLeft {
    	font-size: 18px;
    	text-align: left;
    	inline-size: 50%;
    	padding: 6px;
    	position: fixed;
    	top: 40%;
    	left: 2.5%;
    	width: 45%;
    }
    .topLeft {
    }
    .topLeftFirst {
    	animation: paragraphIntro 2s 1;
    	transition: paragraphIntro 2s;
    }
    .topLeftBorder {
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    }
    #phpIframe {
    	font-size: 18px;
    	text-align: left;
    	padding: 6px;
    	position: fixed;
    	top: 42.375%;
    	left: 2.5%;
    /*	width: 45%;
    	height: 35%;  */
    	width: 100%;
    	height: 100%;  */
    	
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    }
    #phpBody {
        font-size: 18px;
        text-align: left;
        padding: 6px;
        width: 100%;
        height: 100%;
        color: #0ED145;
        background-color: #000000;
    }
    #phpForm {
    	font-size: 18px;
    	text-align: left;
    	padding: 6px;
    	width: 100%;
    	height: 100%;
    }
    #fnameLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #fname {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #phonenumberLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #phonenumber {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #emailLabel {
    	color: #0ED145;
        background-color: #000000;
    }
    #email{
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #addInfoLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #addInfo {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
        padding-right: 5px;
    	resize: none;
    }
    #submit {
    	color: #0ED145;
    	background-color: #000000;
    	height: 35px;
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    	font-family: verdana;
    	resize: none;
    }
    @keyframes paragraphIntro {
    	0% {opacity: 0;}
    	50% {opacity: 0;}
    	75% {opacity: 1;}
    	100% {opacity: 1;}
    }
    .button {
      background-color:black;
      color: #0ED145;
      transition: 0.7s; 
    }
    .button:hover {
      background-color:#0ED145;
      color: black;
      transition: 0.7s; 
    }
    .nav1 {
    	top: 1%;
    	left: 1%;
    	width: 4%;
    	height: 5%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav2 {
    	top: 1%;
    	left: 6%;
    	width: 5%;
    	height: 5%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav3 {
    	top: 1%;
    	left: 12%;
    	width: 4%;
    	height: 5%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav4 {
    	top: 1%;
    	left: 17%;
    	width: 6%;
    	height: 5%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav11 {
    	top: 1%;
    	left: 1%;
    	width: 4%;
    	height: 5%;
    	/*animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; */
    }
    .nav21 {
    	top: 1%;
    	left: 6%;
    	width: 5%;
    	height: 5%;
    	/*animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; */
    }
    .nav31 {
    	top: 1%;
    	left: 12%;
    	width: 4%;
    	height: 5%;
    	/*animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; */
    }
    .nav41 {
    	top: 1%;
    	left: 17%;
    	width: 6%;
    	height: 5%;
    	/*animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; */
    }
    .sideImageHome {
    	position: fixed;
    	width: 45%;
    	height: 50%;
    	right: 2.5%;
    	top: 42.5%;
    	animation: paragraphIntro 2s 1;
    }
    .sideImagePortfolio, .sideImageAbout, .sideImageContact {
    	position: fixed;
    	width: 45%;
    	height: 50%;
    	right: 2.5%;
    	top: 42.5%;
    }
    .sideImage2 {
    	position: fixed;
    	width: 45%;
    	height: 50%;
    	right: 2.5%;
    	top: 42.5%;
    }
    .faded {
        opacity: 0;
    }
    #submit:hover{
    	cursor: pointer;
    }
    #footerContainer {
    	bottom: 0;
    	width: 100%;
    	height: auto;
    	position: fixed;
    }
    #footerText {
    	bottom: 3%;
    	left: 3%;
    	text-align: left;
    }
}
/*mobile*/
@media screen and (max-width: 1200px) {
    head {
    	padding-top: 5%;
    	font-family: verdana;
    	text-align: center;
    }
    h2 {
    	font-size: 36px;
    	padding-bottom: 32px;
    	padding-top: 24px;
    }
    body {
    	font-family: Source Code Pro;
    	text-align: center;
    	color: #0ED145;
    	background-color: #000000;
    }
    iframe {
        width: 100%; 
        height: 100%;
        color: #0ED145;
        border:0;
    }
    button {
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    	margin: 0px;
    	padding: 6px;
    	display: block;
    	height: 100%;
    	width: 100%;
    	color: #0ED145;
    	text-decoration: none;
    	background-color: black;
    	position: fixed;
    }
    button:hover {
    	cursor: pointer;
    }
    .faded {
        opacity: 0;
    }
    #logoContainer {
        position: fixed;
    	padding-top: 0%;
    	padding-bottom: 0;
    	height: 150px;
    	width: auto;
    	right: 3%;
    	top: 3%;
    }
    .logo {
        position: fixed;
    	height: 400px;
    	width: auto;
    	right: 3%;
    	top: 3%;
    	animation: logoIntro 2s 1;
    	transition: logoIntro 2s; 
    }
    .logo2 {
        position: fixed;
    	height: 400px;
    	width: auto;
    	right: 3%;
    	top: 3%;
    }
    @keyframes logoIntro {
    	0% {opacity: 0; height: 55vh; width: auto; top: 20vh;}
    	25% {opacity: 1; height: 55vh; width: auto; top: 20vh;}
    	100% {height: 400px; width: auto;}
    }
    .companyName {
        position: fixed;
        top: 10%;
        left: 3%;
        width: 50%;
        animation: sloganIntro 2s 1;
    	transition: sloganIntro 2s;
    }
    .companyName2 {
        position: fixed;
        top: 10%;
        left: 3%;
        width: 50%;
    }
    @keyframes sloganIntro {
    	0% {opacity: 0;}
    	75% {opacity: 0;}
    	100% {opacity: 1;}
    }
    #topLeft {
    	font-size: 24px;
    	text-align: left;
    	inline-size: 50%;
    	padding: 6px;
    	position: fixed;
    	top: 31%;
    	left: 7.5%;
    	width: 85%;
    	height: 30%;
    }
    .topLeft {
    }
    .topLeftFirst {
    	animation: paragraphIntro 2s 1;
    	transition: paragraphIntro 2s;
    }
    .topLeftBorder {
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    }
    #phpIframe {
    	font-size: 18px;
    	text-align: left;
    	padding: 6px;
    	position: fixed;
    	top: 32.25%;
    	left: 7.5%;
    	width: 85%;
    	height: 30%; 

    	border: 2px solid #0ED145;
    	border-radius: 18px;
    }
    #phpBody {
        font-size: 18px;
        text-align: left;
        padding: 6px;
        width: 100%;
        height: 100%;
        color: #0ED145;
        background-color: #000000;
    }
    #phpForm {
    	font-size: 18px;
    	text-align: left;
    	padding: 6px;
    	width: 100%;
    	height: 100%;
    }
    #fnameLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #fname {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #phonenumberLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #phonenumber {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #emailLabel {
    	color: #0ED145;
        background-color: #000000;
    }
    #email{
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #addInfoLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #addInfo {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
        padding-right: 5px;
    	resize: none;
    }
    #submit {
    	color: #0ED145;
    	background-color: #000000;
    	height: 35px;
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    	font-family: verdana;
    	resize: none;
    }
    @keyframes paragraphIntro {
    	0% {opacity: 0;}
    	50% {opacity: 0;}
    	75% {opacity: 1;}
    	100% {opacity: 1;}
    }
    .nav1 {
    	top: 3%;
    	left: 3%;
    	width: 9%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav2 {
    	top: 3%;
    	left: 13%;
    	width: 13%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav3 {
    	top: 3%;
    	left: 27%;
    	width: 10%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav4 {
    	top: 3%;
    	left: 38%;
    	width: 14%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav11 {
    	top: 3%;
    	left: 3%;
    	width: 9%;
    	height: 4%;
    }
    .nav21 {
    	top: 3%;
    	left: 13%;
    	width: 13%;
    	height: 4%;
    }
    .nav31 {
    	top: 3%;
    	left: 27%;
    	width: 10%;
    	height: 4%;
    }
    .nav41 {
    	top: 3%;
    	left: 38%;
    	width: 14%;
    	height: 4%;
    }
    .sideImageHome {
    	position: fixed;
    	width: 85%;
    	height: 30%;
    	right: 7.5%;
    	Bottom: 5%;
    	animation: paragraphIntro 2s 1;
    }
    .sideImagePortfolio, .sideImageAbout, .sideImageContact {
    	position: fixed;
    	width: 85%;
    	height: 30%;
    	right: 7.5%;
    	Bottom: 5%;
    }
    .sideImage2 {
    	position: fixed;
    	width: 85%;
    	height: 30%;
    	right: 7.5%;
    	Bottom: 5%;
    }
    .faded {
        opacity: 0;
    }
    #submit:hover{
    	cursor: pointer;
    }
    #footerContainer {
    	bottom: 0;
    	width: 100%;
    	height: auto;
    	position: fixed;
    }
    #footerText {
    	bottom: 3%;
    	left: 3%;
    	text-align: left;
    }
}
/*tablet*/
@media screen and (max-width: 800px) {
    head {
    	padding-top: 5%;
    	font-family: verdana;
    	text-align: center;
    }
    h2 {
    	font-size: 36px;
    	padding-bottom: 32px;
    	padding-top: 24px;
    }
    body {
    	font-family: Source Code Pro;
    	text-align: center;
    	color: #0ED145;
    	background-color: #000000;
    }
    iframe {
        width: 100%; 
        height: 100%;
        color: #0ED145;
        border:0;
    }
    button {
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    	margin: 0px;
    	padding: 6px;
    	display: block;
    	height: 100%;
    	width: 100%;
    	color: #0ED145;
    	text-decoration: none;
    	background-color: black;
    	position: fixed;
    	/*animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; */
    }
    button:hover {
    	cursor: pointer;
    }
    .faded {
        opacity: 0;
    }
    #logoContainer {
        position: fixed;
    	padding-top: 0%;
    	padding-bottom: 0;
    	height: 150px;
    	width: auto;
    	right: 3%;
    	top: 3%;
    }
    .logo {
        position: fixed;
    	height: 400px;
    	width: auto;
    	right: 3%;
    	top: 3%;
    	animation: logoIntro 2s 1;
    	transition: logoIntro 2s; 
    }
    .logo2 {
        position: fixed;
    	height: 400px;
    	width: auto;
    	right: 3%;
    	top: 3%;
    }
    @keyframes logoIntro {
    	0% {opacity: 0; height: 55vh; width: auto; top: 20vh;}
    	25% {opacity: 1; height: 55vh; width: auto; top: 20vh;}
    	100% {height: 400px; width: auto;}
    }
    .companyName {
        position: fixed;
        top: 10%;
        left: 3%;
        width: 50%;
        animation: sloganIntro 2s 1;
    	transition: sloganIntro 2s;
    }
    .companyName2 {
        position: fixed;
        top: 10%;
        left: 3%;
        width: 50%;
        /*animation: sloganIntro 2s 1;
    	transition: sloganIntro 2s; */
    }
    @keyframes sloganIntro {
    	0% {opacity: 0;}
    	75% {opacity: 0;}
    	100% {opacity: 1;}
    }
    #topLeft {
    	font-size: 24px;
    	text-align: left;
    	inline-size: 50%;
    	padding: 6px;
    	position: fixed;
    	top: 35%;
    	left: 7.5%;
    	width: 85%;
    	height: 30%;
    }
    .topLeft {
    }
    .topLeftFirst {
    	animation: paragraphIntro 2s 1;
    	transition: paragraphIntro 2s;
    }
    .topLeftBorder {
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    }
    #phpIframe {
    	font-size: 18px;
    	text-align: left;
    	padding: 6px;
    	position: fixed;
    	top: 36.9125%;
    	left: 7.5%;
    	width: 85%;
    	height: 30%;   
     
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    }
    #phpBody {
        font-size: 18px;
        text-align: left;
        padding: 6px;
        width: 100%;
        height: 100%;
        color: #0ED145;
        background-color: #000000;
    }
    #phpForm {
    	font-size: 18px;
    	text-align: left;
    	padding: 6px;
    	width: 100%;
    	height: 100%;
    }
    #fnameLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #fname {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #phonenumberLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #phonenumber {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #emailLabel {
    	color: #0ED145;
        background-color: #000000;
    }
    #email{
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #addInfoLabel {
    	color: #0ED145;
    	background-color: #000000;
    }
    #addInfo {
    	color: #0ED145;
    	background-color: #000000;
    	border: 2px solid #0ED145;
    	border-radius: 14px;
    	padding: 2px;
    	padding-left: 5px;
        padding-right: 5px;
    	resize: none;
    }
    #submit {
    	color: #0ED145;
    	background-color: #000000;
    	height: 35px;
    	border: 2px solid #0ED145;
    	border-radius: 18px;
    	font-family: verdana;
    	resize: none;
    }
    @keyframes paragraphIntro {
    	0% {opacity: 0;}
    	50% {opacity: 0;}
    	75% {opacity: 1;}
    	100% {opacity: 1;}
    }
    .nav1 {
    	top: 3%;
    	left: 3%;
    	width: 9%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav2 {
    	top: 3%;
    	left: 13%;
    	width: 13%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav3 {
    	top: 3%;
    	left: 27%;
    	width: 10%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav4 {
    	top: 3%;
    	left: 38%;
    	width: 14%;
    	height: 4%;
    	animation: sloganIntro 2.5s 1;
    	transition: sloganIntro 2.5s; 
    }
    .nav11 {
    	top: 3%;
    	left: 3%;
    	width: 9%;
    	height: 4%;
    }
    .nav21 {
    	top: 3%;
    	left: 13%;
    	width: 13%;
    	height: 4%;
    }
    .nav31 {
    	top: 3%;
    	left: 27%;
    	width: 10%;
    	height: 4%;
    }
    .nav41 {
    	top: 3%;
    	left: 38%;
    	width: 14%;
    	height: 4%;
    }
    .sideImageHome {
    	position: fixed;
    	width: 85%;
    	height: 20%;
    	right: 7.5%;
    	top: 70%;
    	animation: paragraphIntro 2s 1;
    }
    .sideImagePortfolio, .sideImageAbout, .sideImageContact {
    	position: fixed;
    	width: 85%;
    	height: 20%;
    	right: 7.5%;
    	top: 70%;
    }
    .sideImage2 {
    	position: fixed;
    	width: 85%;
    	height: 20%;
    	right: 7.5%;
    	top: 70%;
    }
    .faded {
        opacity: 0;
    }
    #submit:hover{
    	cursor: pointer;
    }
    #footerContainer {
    	bottom: 0;
    	width: 100%;
    	height: auto;
    	position: fixed;
    }
    #footerText {
    	bottom: 3%;
    	left: 3%;
    	text-align: left;
    }
}